<template>
    <div class="goods">
        <div class="wrap">
            <Crumb> </Crumb>
            <el-image style="width: 100%;" src="http://sc.wolfcode.cn/assets/integralMall/img/users/banner.png"  />
            <ul class="options">
                <li>
                    <strong>排序：</strong>
                    <span :class="{ active: options1Index == index }" v-for="(item, index) in options1" :key="index"
                        @click="options1Fn(item.min, item.max, index)">{{ item.txt }}</span>
                </li>
                <li>
                    <strong>分类：</strong>
                    <span :class="{ active: options2Index == index }" v-for="(item, index) in options2" :key="index"
                        @click="options2Fn(item.type, index)">{{ item.txt }}</span>
                </li>
            </ul>
            <List :arr="goodsListShow" />
            <div class="jz">
                <i class="iconfont icon-loading myloading" v-show="!isReachBottom"></i>
                {{ isReachBottom? "加载完毕": "正在加载中..." }}
            </div>
        </div>
    </div>
</template>

<script setup lang='ts'>
import List from '@/components/home/List.vue';
import { GoodsSearchAPI } from '@/request/api';
import {getScrollTop,getClientHeight,getScrollHeight} from "@/utils/index";
import { reactive, ref,onMounted,onBeforeUnmount  } from 'vue';
import { useRoute } from 'vue-router';
import Crumb from "@/components/Crumb.vue"
const form = reactive({
    did: 0,
    type: 0,
    min: 0,
    max: 0,
    keyword: "",
})

const route = useRoute()
const goodsList = ref<Datum[]>([])
const goodsListShow = ref<Datum[]>([])
const options1Index = ref(0)
const options2Index = ref(0)
const page = ref(1)
const size = ref(8)
// 是否正在加载下一页数据
const isLoading = ref(false)
// 是否到达底部
const isReachBottom = ref(false)
const showTop = ref(false)
// 排序的数组项
const options1 = reactive([
    { min: 0, max: 0, txt: "全部" },
    // "我还可以兑换"的max值是Header组件的coin值
    { min: 0, max: 0, txt: "我还可以兑换" },
    { min: 0, max: 500, txt: "0-500分" },
    { min: 500, max: 1000, txt: "500-1000分" },
    { min: 1000, max: 1500, txt: "1000-1500分" },
    { min: 1500, max: 2500, txt: "1500-2500分" },
    { min: 2500, max: 6500, txt: "2500-6500分" },
    { min: 6500, max: 10000, txt: "6500-10000分" },
])
const options2 = reactive([
    { type: 0, txt: "全部" },
    { type: 1, txt: "实体商品" },
    { type: 2, txt: "虚拟商品" },
])

form.keyword = route.query.keyword as string
const getGoodsSearchAPI = () => {
    GoodsSearchAPI(form).then(res => {
        if (res.code === 0) {
            // 给商品列表赋值
            goodsList.value = res.data

            // 初始化：显示第一页的数据
            goodsListShow.value = goodsList.value.filter((item, index) => index < 8);
            page.value = 1;
            // 判断数据是否加载完毕
            isReachBottom.value = false;
            if (goodsList.value.length == goodsListShow.value.length) {
                isReachBottom.value = true;
                return;
            }
     
          
        }
    })
}
getGoodsSearchAPI()
const options1Fn = (min: number, max: number, index: number) => {
    options1Index.value = index;
    form.min = min;
    form.max = max;
    getGoodsSearchAPI();
}
const options2Fn = (type: number, index: number) => {
    options2Index.value = index;
    console.log(type);
    form.type = type;
    getGoodsSearchAPI();
}
onMounted(()=>{
    window.addEventListener("scroll",scrollFn)
})
onBeforeUnmount(()=>{
    window.removeEventListener("scroll",scrollFn)
})
const scrollFn=()=>{
      if(getScrollTop()>0){
      showTop.value=true
       }else{
        showTop.value=false
      }
        if(getClientHeight()+getScrollTop()>=getScrollHeight()-100){
         if (goodsList.value.length == goodsListShow.value.length) {
                isReachBottom.value = true;
                return;
            }
              if(!isLoading.value){
                isLoading.value=true;
            page.value++;
           
            setTimeout(()=>{
          for(let i =(page.value-1)*size.value;i<page.value*size.value;i++){
          goodsList.value[i] && goodsListShow.value.push(goodsList.value[i])
         }
        isLoading.value=false
            },1000)
         }
       
        } 
    }
</script>

<style lang = "less" scoped>
@import "../../assets/css/public.less";

.goods {
    padding-bottom: 50px;
    background: #efefef;
    padding-top: 20px;

    .options {
        padding-top: 20px;
        padding-bottom: 40px;

        li {
            margin-top: 20px;

            strong {
                color: #000;
                font-weight: bold;
            }

            span {
                margin-right: 20px;
                margin-left: 10px;
                cursor: pointer;
                color: #999;

                &.active {
                    color: @base-color;
                    font-weight: bold;
                }
            }
        }
    }
    .jz{
        display: flex;
        justify-content:center ;
        .myloading {
        display: inline-block;
        margin-top: 1px;
        animation: ani_div 2s linear infinite;
    }

    @keyframes ani_div {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }
    }
    
   
}
</style>